<template>
  <div class="box-title">我的堂食</div>
  <div class="box">
    <div class="box-name left">商家名称：{{ arr.name }}</div>
    <div class="box-img">
      <img :src="img" alt="" class="sm:w-2/5" />
    </div>
    <div class="box-name2">商品名称：{{ arr.productName }}</div>
    <div class="box-num">数量：</div>
    <div class="box-btn">
      <button @click="minus(index)" class="box-btn1">-</button>
      <input type="text" class="box-inp" v-model="numsum" />
      <button @click="add(index)" class="box-btn1">+</button>
    </div>
    <div class="box-beizhu">商品备注</div>
    <textarea
      class="txtCon"
      name=""
      id=""
      cols="30"
      rows="6"
      v-model="beizhu"
    ></textarea>
    <div class="box-p1">
      <p>
        配送座号
        <input type="text" style="border: 1px solid black" v-model="zuohao" />
      </p>
    </div>
    <div class="box-p2">
      <p>
        联系电话：
        <input
          type="text"
          style="border: 1px solid black"
          v-model="userphone"
        />
      </p>
    </div>
    <div class="box-p3">
      <p>合计价格:</p>
      <p class="box-p3-price">￥{{ jisuan }}</p>
    </div>
    <button class="btn-a" @click="goto()">确认下单</button>
    <button class="btn-b" @click="tohome">取消订单</button>
  </div>
</template>

<script setup>
import { computed, reactive, ref, onMounted } from "vue";
import axios from "axios";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let zuohao = ref("");
let beizhu = ref("");
let userphone = ref("");
let numsum = ref(0);
let price = ref();
let img = ref();
let arr = ref([]);
let userid = ref();
let food = ref("");
let vendorId = ref();
let productId = ref();
let type = ref();
// 响应式的数据
let list = ref([]);

// 加
function add(index) {
  numsum.value++;
}
//减
function minus(index) {
  numsum.value--;
}
function tohome() {
  router.push("Nhome");
}
onMounted(() => {
  arr.value = JSON.parse(route.query.orderdata);
  price.value = arr.value.price;
  img.value = arr.value.img.split(",")[1];
  userid.value = route.query.whoid;
  food.value = arr.value.name;
  productId.value = arr.value.productId;
  type.value = JSON.parse(route.query.type);
  axios
    .get("http://1.14.126.98:8081/user/search", {
      params: {
        keyword: food.value,
      },
    })
    .then((res) => {
      vendorId.value = res.data[0].vendorId;
    });
});
let time = ref();
function goto() {
  time.value = new Date().getTime();
  console.log(jisuan.value);
  axios
    .post(
      `http://1.14.126.98:8081/order/add?userId=${userid.value}&vendorId=${vendorId.value}&productId=${productId.value}&type=${type.value}&price=${jisuan.value}&notes=${beizhu.value}&address=${zuohao.value}&orderLong=${time.value}`
    )
    .then((res) => {
      console.log(res.data);
    });
  router.push({
    name: "orderCompletion",
    query: {
      shopdata: JSON.stringify(arr.value),
      ordertime: time.value,
      totalprice: jisuan.value,
      orderaddress: JSON.stringify(zuohao.value),
      userstoreid: userid.value,
    },
  });
  localStorage.setItem("orderlong", time.value);
  console.log(time.value);
}
// 计算属性
const jisuan = computed(() => {
  return numsum.value * price.value;
});
</script>

<style lang="scss" scoped>
@import "@/components/zhouq/tangshi/index.scss";
</style>
